<template>
  <div>
    <van-popup
      v-model="show"
      :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
      :close-on-click-overlay="closeOverlay"
    >
      <div class="picture-box">
        <!-- <img class="picture" src="../assets/icons/common/loadingNew.gif" alt="" /> -->
        <div class="text-box">正在加载</div>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Popup, Loading } from 'vant';
import { GlobalModule } from '@/store/modules/global';

@Component({
  components: {
    [Popup.name]: Popup,
    [Loading.name]: Loading,
  },
})
export default class MyLoading extends Vue {
  closeOverlay = false;
  get show() {
    return GlobalModule.pendingRequests > 0;
  }
  set show(val) {}
}
</script>

<style lang="less" scoped>
.van-popup {
  background-color: rgba(0, 0, 0, 0);
}
.picture-box {
  width: 84px;
  height: 84px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .picture {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  .text-box {
    font-size: 12px;
    color: #ffffff;
  }
}
</style>
